import React, { useState } from 'react';
import {
    Text,
    ScrollView,
    View,
    Image,
    TouchableOpacity,
    TextInput,
    Alert,
} from 'react-native';
import { pxPage } from '../../common/Common'
import { throttle } from '../../common/Common'
import { Header } from 'react-native-elements';
import { connect } from 'react-redux'
import searchResult from '../../redux/actions/Search_action';
import Btn from '../../components/Btn'

const SearchResult = (props) => {
    const [page, changepage] = useState(1)
    const [value, onChangeText] = useState(props.navigation.state.params.value);
    props.dispatch(searchResult(props.navigation.state.params.value, page))

    if (props.searchResult.data?.length == 0) {
        return <View>
            <Header
                backgroundColor='#fea6c4'
                leftComponent={
                    <TouchableOpacity
                        onPress={throttle(() => {
                            props.navigation.goBack()
                        }, 2000)}
                    >
                        <Image
                            source={require('../../common/icon/返回.png')}
                            style={{
                                height: pxPage(25),
                                width: pxPage(25),
                                marginLeft: pxPage(15),
                                marginTop: pxPage(5)
                            }} />
                    </TouchableOpacity>
                }
                centerComponent={
                    <View style={{
                        height: pxPage(40),
                        width: pxPage(265),
                        backgroundColor: 'rgba(0,0,0,0.2)',
                        borderRadius: 15,
                        color: '#fff',
                        flexDirection: 'row'
                    }}>
                        {/* searchBar-input */}
                        <TextInput
                            placeholderTextColor="#fff"
                            style={{ marginLeft: pxPage(10), height: pxPage(44), color: '#fff' }}
                            placeholder={'点击搜索'}
                            clearTextOnFocus={true}
                            onChangeText={text => onChangeText(text)}
                            value={value}
                        >
                        </TextInput>
                    </View>
                }
                rightComponent={
                    <TouchableOpacity
                        style={{
                            right: pxPage(20),
                            top: pxPage(6),
                            position: 'absolute'
                        }}
                        onPress={throttle(() => {
                            if (value == "") {
                                Alert.alert(
                                    "",
                                    "输入的搜索内容不能为空哦~",
                                    [
                                        {
                                            text: "确定",
                                            onPress: () => console.log("ok"),
                                            style: "cancel"
                                        },
                                    ]
                                );
                            } else props.navigation.navigate('SearchResult', {
                                value: value
                            })
                        }, 2000)}
                    >
                        <Image
                            source={require('../../common/icon/搜索.png')}
                            style={{
                                width: pxPage(30),
                                height: pxPage(30),
                            }}
                        >
                        </Image>
                    </TouchableOpacity>
                }
            />
            <View style={{
                justifyContent: 'center',
                alignItems: 'center',
                margin: pxPage(20)
            }}>
                <Text style={{ color: '#666' }}>T^T搜不到你想要的动漫呢</Text>
                <Text style={{ color: '#666' }}> 别慌</Text>
                <Text style={{ color: '#666' }}>这些动漫肯定合你口味</Text>
            </View>

            {/* list */}
            <ScrollView>
                {props.recentData?.Comment?.map((item, index) => {
                    return <View key={index} style={{ marginBottom: pxPage(15) }}>
                        <View style={{
                            flexDirection: "row",
                            height: pxPage(190),
                            alignContent: 'center',
                            justifyContent: 'center',
                            alignItems: 'center',
                            marginTop: pxPage(10),
                            marginBottom: pxPage(10)

                        }}>
                            {/* 动漫封面部分 */}
                            <Image
                                style={{
                                    width: pxPage(126),
                                    height: pxPage(171),
                                    borderWidth: 1.5,
                                    borderColor: '#F1687A',
                                    shadowColor: '#999',
                                    borderWidth: 1,
                                    borderColor: '#F1687A',
                                }}
                                source={{ uri: item.img }}></Image>

                            {/* 文字简介部分 */}
                            <View style={{
                                width: pxPage(245), height: pxPage(171), paddingLeft: pxPage(15)
                            }}>
                                <Text style={{
                                    fontWeight: 'bold',
                                    fontSize: 15,
                                    marginBottom: pxPage(10)
                                }}>{item.name}</Text>

                                <Text style={{ color: '#666', fontSize: 13, marginBottom: pxPage(3) }}>类型: {item.type}</Text>
                                <Text style={{ color: '#666', fontSize: 13, marginBottom: pxPage(3) }}>分类: {item.region} {item.lndexes} {item.label}</Text>
                                <Text style={{ fontSize: 13, color: '#888' }}>简介: {item.introduction.length <= 60 ? item.introduction : item.introduction.slice(0, 60) + '...'}</Text>

                            </View>
                        </View>

                        {/* 分集部分 */}
                        <View style={{
                            flexDirection: 'row',
                            alignItems: 'center',
                            marginLeft: pxPage(20)
                        }}>

                            <View style={{
                                flexDirection: 'row',
                                alignItems: 'center',
                            }}>
                                <Image style={{
                                    width: pxPage(25),
                                    height: pxPage(25),
                                    marginRight: pxPage(5)
                                }}
                                    source={require('../../common/icon/花.png')}></Image>
                                {/* 剧集更新情况 */}
                                <Text style={{
                                    fontSize: 15,
                                }}>{item.synopsis.split('，')[0]}</Text>
                            </View>
                            <View style={{ position: 'absolute', right: pxPage(10) }}>
                                <Btn title={'立即播放'} img={require('../../common/icon/播放.png')} />
                            </View>

                        </View>
                    </View>
                })}

                <View style={{
                    height: pxPage(30)
                }}></View>

            </ScrollView>

        </View>
    } else
        return <View>
            <Header
                backgroundColor='#fea6c4'
                leftComponent={
                    <TouchableOpacity
                        onPress={throttle(() => {
                            props.navigation.goBack()
                        }, 2000)}
                    >
                        <Image
                            source={require('../../common/icon/返回.png')}
                            style={{
                                height: pxPage(25),
                                width: pxPage(25),
                                marginLeft: pxPage(15),
                                marginTop: pxPage(5)
                            }} />
                    </TouchableOpacity>

                }
                centerComponent={
                    <View style={{
                        height: pxPage(40),
                        width: pxPage(265),
                        backgroundColor: 'rgba(0,0,0,0.2)',
                        borderRadius: 15,
                        color: '#fff',
                        flexDirection: 'row'
                    }}>
                        {/* searchBar-input */}
                        <TextInput
                            placeholderTextColor="#fff"
                            style={{ marginLeft: pxPage(10), height: pxPage(44), color: '#fff' }}
                            placeholder={'点击搜索'}
                            clearTextOnFocus={true}
                            onChangeText={text => onChangeText(text)}
                            value={value}
                        >
                        </TextInput>
                    </View>
                }
                rightComponent={
                    <TouchableOpacity
                        style={{
                            right: pxPage(20),
                            top: pxPage(6),
                            position: 'absolute'
                        }}
                        onPress={throttle(() => {
                            if (value == "") {
                                Alert.alert(
                                    "",
                                    "输入的搜索内容不能为空哦~",
                                    [
                                        {
                                            text: "确定",
                                            onPress: () => console.log("ok"),
                                            style: "cancel"
                                        },
                                    ]
                                );
                            } else props.navigation.navigate('SearchResult', {
                                value: value
                            })
                        }, 2000)}
                    >
                        <Image
                            source={require('../../common/icon/搜索.png')}
                            style={{
                                width: pxPage(30),
                                height: pxPage(30),

                            }}
                        >
                        </Image>
                    </TouchableOpacity>
                }
            />

            {/* 分页器 */}
            <View style={{
                flexDirection: 'row',
                alignItems: 'center',
                justifyContent: 'center',
                borderBottomColor: '#ccc',
                borderBottomWidth: 2,
            }}>
                <TouchableOpacity
                    style={{
                        position: 'absolute',
                        left: pxPage(50)
                    }}
                    onPress={throttle(() => {
                        if (page == 1) {
                            Alert.alert(
                                "",
                                "已经在第一页了，不能再点了哦~",
                                [
                                    {
                                        text: "确定",
                                        onPress: () => console.log("ok"),
                                        style: "cancel"
                                    },
                                ]
                            )
                        } else {
                            changepage(page - 1);
                            props.dispatch(searchResult(props.navigation.state.params.value, page))
                        }
                    }, 2000)}
                >
                    <Text style={{ color: '#F1687A' }}>上一页</Text>
                </TouchableOpacity>

                <Text style={{ color: '#F1687A' }}>第 </Text>
                <Text style={{ color: '#F1687A' }}>{page}</Text>
                <Text style={{ color: '#F1687A' }}> 页 / 共 {Math.ceil(props.searchResult.length / 9)} 页</Text>
                <TouchableOpacity
                    style={{
                        position: 'absolute',
                        right: pxPage(50)
                    }}
                    onPress={throttle(() => {
                        if (page == Math.ceil(props.searchResult.length / 9)) {
                            Alert.alert(
                                "",
                                "已经在最后一页了，不能再点了哦~",
                                [
                                    {
                                        text: "确定",
                                        onPress: () => console.log("ok"),
                                        style: "cancel"
                                    },
                                ]
                            )
                        } else {
                            changepage(page + 1);
                            props.dispatch(searchResult(props.navigation.state.params.value, page))
                        }
                    }, 2000)}
                >
                    <Text style={{ color: '#F1687A' }}>下一页</Text>
                </TouchableOpacity>
            </View>

            {/* list */}
            <ScrollView>
                {props.searchResult?.data?.map((item, index) => {
                    return <View key={index} style={{ marginBottom: pxPage(15) }}>
                        <View style={{
                            flexDirection: "row",
                            height: pxPage(190),
                            alignContent: 'center',
                            justifyContent: 'center',
                            alignItems: 'center',
                            marginTop: pxPage(10),
                            marginBottom: pxPage(10)
                        }}>
                            {/* 动漫封面部分 */}
                            <Image
                                style={{
                                    width: pxPage(126),
                                    height: pxPage(171),
                                    borderWidth: 1.5,
                                    borderColor: '#F1687A',
                                    shadowColor: '#999',
                                    borderWidth: 1,
                                    borderColor: '#F1687A',
                                    backgroundColor: '#ccc'
                                }}
                                source={{ uri: item.img }}></Image>

                            {/* 文字简介部分 */}
                            <View style={{
                                width: pxPage(245), height: pxPage(171), paddingLeft: pxPage(15)
                            }}>
                                <Text style={{
                                    fontWeight: 'bold',
                                    fontSize: 15,
                                    marginBottom: pxPage(10)
                                }}>{item.name}</Text>

                                <Text style={{ color: '#666', fontSize: 13, marginBottom: pxPage(3) }}>类型: {item.type}</Text>
                                <Text style={{ color: '#666', fontSize: 13, marginBottom: pxPage(3) }}>分类: {item.region} {item.lndexes} {item.label}</Text>
                                <Text style={{ fontSize: 13, color: '#888' }}>简介: {item.introduction.length <= 60 ? item.introduction : item.introduction.slice(0, 60) + '...'}</Text>

                            </View>
                        </View>

                        {/* 分集部分 */}
                        <View style={{
                            flexDirection: 'row',
                            alignItems: 'center',
                            marginLeft: pxPage(20)
                        }}>

                            <View style={{
                                flexDirection: 'row',
                                alignItems: 'center',
                            }}>
                                <Image style={{
                                    width: pxPage(25),
                                    height: pxPage(25),
                                    marginRight: pxPage(5)
                                }}
                                    source={require('../../common/icon/花.png')}></Image>
                                {/* 剧集更新部分 */}
                                <Text style={{
                                    fontSize: 15,
                                }}>{item.synopsis.split('，')[0]}</Text>
                            </View>
                            <View style={{ position: 'absolute', right: pxPage(10) }}>
                                <Btn 
                                    onPress={()=>{
                                        console.log(item);
                                        props.navigation.navigate('Detail',{
                                            item:item
                                        })
                                    }}
                                title={'立即播放'} img={require('../../common/icon/播放.png')} />
                            </View>

                        </View>
                    </View>
                })}

                <View style={{
                    height: pxPage(130)
                }}></View>
            </ScrollView>
        </View>
}

const mapStateToProps = state => {
    return {
        searchResult: state.searchResult,
        recentData: state.recentData
    }
}

export default connect(mapStateToProps)(SearchResult)